<template>
    <div>
        <div class="banner">
            <img src="@/assets/img/cooperation/banner_f@2x.png" alt="banner">
        </div>
        <div class="wrap">
            <img :src="require(`@/assets/img/cooperation/panel/${item+1}.png`)" v-for="item in 4" :key="item">
        </div>
        <!-- <el-row class="content">
            <el-row class="contentInner">
                <NavStitle :routes="routes" :links="links"/>
                <el-row class="showView">
                    <SiceTitle :content="siceTitleContent"/>
                    <div class="icons">
                        <div class="iconItem" v-for="item in list" :key="item.title">
                            <img :src="item.icon" alt="icon">
                            <p class="title">{{item.title}}</p>
                            <p class="stitle">{{item.stitle}}</p>
                        </div>
                    </div>
                    <div class="strContent">
                        <p>{{strContent.p1}}</p>
                        <p>{{strContent.p2}}</p>
                        <div class="imgbox">
                            <img src="" :alt="item" v-for="item in imgs" :key="item">
                        </div>
                        <p>{{strContent.p3}}</p>
                        <p>{{strContent.p4}}</p>
                        <p>{{strContent.p5}}</p>
                        <p>{{strContent.p6}}</p>
                        <p>{{strContent.p7}}</p>
                    </div>
                </el-row>
            </el-row>
        </el-row> -->
    </div>
</template>

<script>
import NavStitle from '@/components/navStitle';
import SiceTitle from '@/views/introduce/components/siceTitle';
export default {
    components:{NavStitle,SiceTitle},
    data(){
        return {
            links:[
                '/cooperation'
            ],
            siceTitleContent:{
                sice:"WIN",
                title:"赢在选择",
                titleEn:"WIN IN CHOICE"
            }
        }
    },
    computed:{
        routes(){
            return this.$t("cooperation.nav");
        },
        list(){
            const _list = this.$t("cooperation.list");
            const icons = [
                require("@/assets/img/cooperation/好产品@2x.png"),
                require("@/assets/img/cooperation/大施工@2x.png"),
                require("@/assets/img/cooperation/星服务@2x.png"),
                require("@/assets/img/cooperation/全国@2x.png"),
                require("@/assets/img/cooperation/优异产能@2x.png"),
                require("@/assets/img/cooperation/质量认证齐全@2x.png"),
                require("@/assets/img/cooperation/先进管理理念@2x.png"),
                require("@/assets/img/cooperation/技术先进@2x.png"),
                require("@/assets/img/cooperation/先进物流管理@2x.png")
            ]
            const _resultArr = [];
            _list.map((item,i)=> {
                _resultArr.push({
                    ...item,
                    icon:icons[i]
                })
            })
            return _resultArr;
        },
        strContent(){
            return this.$t("cooperation.str");
        },
        imgs(){
            return this.$t("cooperation.imgs");
        }
    },
}
</script>

<style lang="less" scoped>
.wrap {
    overflow: hidden;
    img {
        max-width: 100%;
    }
}
.banner {
    height: 280px;
    background-color: pink;
    img {
        height: 280px;
        width: 100%;
    }
}
// .content {
//     margin-top: 37px;
//     .contentInner {
//         width:1280px;
//         margin: 0 auto;
//         .showView {
//             padding-top: 40px;
//             .icons {
//                 display: flex;
//                 flex-wrap: wrap;
//                 .iconItem {
//                     text-align: left;
//                     flex:0 0 33.33333%;
//                     margin-bottom: 40px;
//                     img {
//                         width: 22px;
//                     }
//                     .title {
//                         font-size:20px;
//                         font-weight:400;
//                         color:rgba(51,51,51,1);
//                         line-height:24px;
//                     }
//                     .stitle {
//                         font-size:12px;
//                         font-weight:400;
//                         color:rgba(153,153,153,1);
//                         line-height:24px;
//                     }
//                 }
//             }
//             .strContent {
//                 text-align: left;
//                 margin-bottom: 40px;
//                 p {
//                     text-indent: 2em;
//                     font-size: 14px;
//                     color: #666;
//                     line-height: 28px;
//                 }
//                 .imgbox {
//                     display: flex;
//                     margin: 30px 0;
//                     img {
//                         width: 400px;
//                         height: 214px;
//                         flex: 0 0 400px;
//                         margin-right: 40px;
//                         &:last-child{
//                             margin-right: 0;
//                         }
//                     }
//                 }
//             }
//         }
//     }
// }
</style>